<script setup>
import {onBeforeMount, ref} from 'vue'
import { CScrollbar } from 'c-scrollbar'
import { listBrandsApi } from '@/commons/api'

const props = defineProps({
  kind: {
    type: Number,
    required: false,
    default: 1
  },
  brandIds: {
    type: String,
    required: false,
    default: ''
  }
})

const selIds = ref([])
onBeforeMount(() => {
  selIds.value = props.brandIds ? props.brandIds.split(',') : []
  listBrands()
})

const brands = ref([])
const noData = ref(true)
const listBrands = async () => {
  noData.value = true
  const res = await listBrandsApi({ kind: props.kind })
  if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
    brands.value = res.data
    noData.value = false
  }
}

const emit = defineEmits(['setBrand'])
const selBrand = (brandId) => {
  if(selIds.value.indexOf(brandId) === -1) {
    selIds.value.push(brandId)
  } else {
    selIds.value.splice(selIds.value.indexOf(brandId), 1)
  }
  emit('setBrand', selIds.value)
}
</script>

<template>
  <div class="bs-a">
    <div class="no-data" v-if="noData">暂无内容</div>
    <div class="h100" v-else>
      <c-scrollbar>
        <div class="bs-b">
          <div :class="[selIds.indexOf(brand.brandId)!==-1 ? 'bs-d' : 'bs-c']" v-for="brand in brands" :key="brand.brandId" @click="selBrand(brand.brandId)">
            <div class="bs-e"><img width="90" height="40" v-lazy="brand.logoUrl.replace('/img/', '/img/thumb/')" :alt="brand.logoName" /></div>
            <div class="bs-f">{{ brand.brandName }}</div>
          </div>
        </div>
      </c-scrollbar>
    </div>
  </div>
</template>

<style scoped>
.bs-a {width: 100%; height: 250px; overflow: hidden; border: 1px #CCC solid;}
.bs-b {width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap;}
.bs-c {margin: 5px; border: 1px #ffffff solid; cursor: pointer;}
.bs-c:hover {border: 1px #1b90fb solid;}
.bs-d {margin: 5px; border: 1px #1b90fb solid; cursor: pointer;}
.bs-e {width: 90px; height: 40px; border: 1px #DDD solid; padding: 4px;}
.bs-f {line-height: 20px; font-size: 12px; text-align: center;}
</style>